import React, { Component } from 'react'
// import VideoPlayer from './VideoPlayer'

import { Modal} from 'antd';
    

import styles from './Player.less';

const playerWidth = 1000;


export default class Player extends Component {

    state = {
        fileUrl: '',
        canPlay: true,
        errorText: '播放失败',
        text: '正在加载...'
    }

    componentDidMount() {

        fetch(this.props.fileInfo.fileUrl)
            .then(res => {
                if (res.ok) {
                    this.setState({
                        canPlay: true,
                        text: '正在缓冲...'
                    })
                    return res.blob()
                } else {
                    let msg = `请求错误: ${res.status}`;
                    this.setState({
                        canPlay: false,
                        errorText: msg
                    })
                    throw new Error(msg)
                }
            })
            .then(blob => {
                const url = window.URL.createObjectURL(blob);
                this.setState({ 
                    fileUrl: url,
                    text: ' '
                })
            }).catch(error => {
                this.setState({
                    canPlay: false,
                    errorText: error.message
                })
                // message.error(error.message)
            });
    }

    render() {
        const { fileName } = this.props.fileInfo
        return (

            // 此处使用对话框的作用 -> 需要用户处理事务，又不希望跳转页面以致打断工作流程时 -> Modal 效果
            // 应该是把这个当作了一个 div 容器吧
            <Modal
                visible={true}   // 对话框是否可见
                title={`${fileName || '正在加载...'}`}   // 标题
                width={playerWidth}   // 宽度

                // 点击遮罩层或右上角叉或取消按钮的回调, 应该是接收的父组件方法
                onCancel={() => this.props.handleClose()}  
                wrapClassName={styles.modalWrap}    // 对话框外层容器的类名
                maskClosable={false}   // 点击蒙层是否允许关闭, false 为不关闭
                destroyOnClose={true}  // 关闭时销毁 Modal 里的子元素
            >
                {/* 包裹视频标签的 div */}
                <div className={styles.player} style={{ height: playerWidth * 9 / 16 }}>
                    
                    {/* 缓冲提示信息 */}
                    <span className={styles.hh}>
                        {this.state.text}
                    </span>

                    {
                        this.state.canPlay ? (

                            <video src={this.state.fileUrl} autoPlay="autoplay" controls="controls" 
                             style={{ width: '100%', height: '100%' }}
                            >
                                您的浏览器不支持 video 标签
                            </video>

                        ) : (
                                <div className="flex flex-item justify-content-center inline-item">
                                    <div className={styles.error}>{this.state.errorText}</div>
                                </div>
                            )
                    }

                </div>

            </Modal>

        )
    }
}
